<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Popover 弹出框 | Young Design</title>
    <meta name="description" content="A VitePress site">
    <link rel="stylesheet" href="/young-design-docs/assets/style.fce99c9f.css">
    <link rel="modulepreload" href="/young-design-docs/assets/chunks/iconfont.b28d9a832.js">
    <link rel="modulepreload" href="/young-design-docs/assets/chunks/iconfont.b28d9a83.js">
    <link rel="modulepreload" href="/young-design-docs/assets/app.58e303bb.js">
    <link rel="modulepreload" href="/young-design-docs/assets/examples_popover.md.fcd855f6.lean.js">
    
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-7ca77190><!--[--><!--]--><!--[--><span tabindex="-1" data-v-500dd3ea></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-500dd3ea> Skip to content </a><!--]--><!----><header class="VPNav" data-v-7ca77190 data-v-2447c659><div class="VPNavBar has-sidebar" data-v-2447c659 data-v-ca4000e6><div class="container" data-v-ca4000e6><div class="VPNavBarTitle has-sidebar" data-v-ca4000e6 data-v-fb68e53c><a class="title" href="/young-design-docs/" data-v-fb68e53c><!--[--><!--]--><!--[--><img class="VPImage logo" src="/young-design-docs/logo.png" data-v-3b1ccdae><!--]--><!----><!--[--><!--]--></a></div><div class="content" data-v-ca4000e6><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ca4000e6 data-v-f0fb1ba2><span id="main-nav-aria-label" class="visually-hidden" data-v-f0fb1ba2>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/young-design-docs/guild/installation.html" data-v-f0fb1ba2 data-v-44d69346 data-v-55b744de><!--[-->指南<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/young-design-docs/examples/button.html" data-v-f0fb1ba2 data-v-44d69346 data-v-55b744de><!--[-->组件<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ca4000e6 data-v-1cf3312d><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-1cf3312d data-v-1798e8b5 data-v-29ecf87c><span class="check" data-v-29ecf87c><span class="icon" data-v-29ecf87c><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1798e8b5><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1798e8b5><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ca4000e6 data-v-84369ac6 data-v-27273706><!--[--><a class="VPSocialLink" href="https://github.com/gezhicui/young-design" target="_blank" rel="noopener" data-v-27273706 data-v-49138c2c><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-ca4000e6 data-v-38d652da data-v-71baf468><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-71baf468><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-71baf468><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-71baf468><div class="VPMenu" data-v-71baf468 data-v-0d9f6bd1><!----><!--[--><!--[--><!----><div class="group" data-v-38d652da><div class="item appearance" data-v-38d652da><p class="label" data-v-38d652da>Appearance</p><div class="appearance-action" data-v-38d652da><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-38d652da data-v-1798e8b5 data-v-29ecf87c><span class="check" data-v-29ecf87c><span class="icon" data-v-29ecf87c><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1798e8b5><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1798e8b5><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-38d652da><div class="item social-links" data-v-38d652da><div class="VPSocialLinks social-links-list" data-v-38d652da data-v-27273706><!--[--><a class="VPSocialLink" href="https://github.com/gezhicui/young-design" target="_blank" rel="noopener" data-v-27273706 data-v-49138c2c><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-ca4000e6 data-v-6767b273><span class="container" data-v-6767b273><span class="top" data-v-6767b273></span><span class="middle" data-v-6767b273></span><span class="bottom" data-v-6767b273></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-7ca77190 data-v-c9040016><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-c9040016><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-c9040016><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-c9040016>Menu</span></button><a class="top-link" href="#" data-v-c9040016> Return to top </a></div><aside class="VPSidebar" data-v-7ca77190 data-v-cdb0a388><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-cdb0a388><span class="visually-hidden" id="sidebar-aria-label" data-v-cdb0a388> Sidebar Navigation </span><!--[--><div class="group" data-v-cdb0a388><section class="VPSidebarGroup" data-v-cdb0a388 data-v-172a63c0><div class="title" data-v-172a63c0><h2 class="title-text" data-v-172a63c0>基础组件</h2><div class="action" data-v-172a63c0><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-172a63c0><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-172a63c0><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-172a63c0><!--[--><a class="VPLink link link" href="/young-design-docs/examples/button.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Button 按钮</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/icon.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Icon 图标</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/container.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Container 布局容器</span><!----><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-cdb0a388><section class="VPSidebarGroup" data-v-cdb0a388 data-v-172a63c0><div class="title" data-v-172a63c0><h2 class="title-text" data-v-172a63c0>数据展示</h2><div class="action" data-v-172a63c0><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-172a63c0><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-172a63c0><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-172a63c0><!--[--><a class="VPLink link link" href="/young-design-docs/examples/avatar.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Avatar 头像</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/info.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Info 信息栏</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/card.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Card 卡片</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/scroll.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Scroll 滚动</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/switch.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Switch 开关</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/select.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Select 选择器</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/input.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Input 输入框</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/textarea.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Textarea 文本域</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/radio.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Radio 单选框</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/rate.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Rate 评分</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/upload.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Upload 上传</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/table.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Table 表格</span><!----><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-cdb0a388><section class="VPSidebarGroup" data-v-cdb0a388 data-v-172a63c0><div class="title" data-v-172a63c0><h2 class="title-text" data-v-172a63c0>导航组件</h2><div class="action" data-v-172a63c0><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-172a63c0><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-172a63c0><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-172a63c0><!--[--><a class="VPLink link link" href="/young-design-docs/examples/back-top.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>BackTop 回到顶部</span><!----><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-cdb0a388><section class="VPSidebarGroup" data-v-cdb0a388 data-v-172a63c0><div class="title" data-v-172a63c0><h2 class="title-text" data-v-172a63c0>反馈组件</h2><div class="action" data-v-172a63c0><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-172a63c0><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-172a63c0><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-172a63c0><!--[--><a class="VPLink link link" href="/young-design-docs/examples/message.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Message 消息提示</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/notification.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Notification 通知</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/dialog.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Dialog 对话框</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/drawer.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Drawer 抽屉</span><!----><!--]--><!----></a><a class="VPLink link link" href="/young-design-docs/examples/shake.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Shake 抖动</span><!----><!--]--><!----></a><a class="VPLink link link active" href="/young-design-docs/examples/popover.html" data-v-172a63c0 data-v-10b81855 data-v-55b744de><!--[--><span class="link-text" data-v-10b81855>Popover 弹出框</span><!----><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-7ca77190 data-v-2801a258><div class="VPDoc has-sidebar has-aside" data-v-2801a258 data-v-48aae400><div class="container" data-v-48aae400><div class="aside" data-v-48aae400><div class="aside-curtain" data-v-48aae400></div><div class="aside-container" data-v-48aae400><div class="aside-content" data-v-48aae400><div class="VPDocAside" data-v-48aae400 data-v-6bc6e7f3><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-6bc6e7f3 data-v-41b3a498><div class="content" data-v-41b3a498><div class="outline-marker" data-v-41b3a498></div><div class="outline-title" data-v-41b3a498>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-41b3a498><span class="visually-hidden" id="doc-outline-aria-label" data-v-41b3a498> Table of Contents for current page </span><ul class="root" data-v-41b3a498><!--[--><li style="" data-v-41b3a498><a class="outline-link" href="#基本使用" data-v-41b3a498>基本使用</a><!----></li><li style="" data-v-41b3a498><a class="outline-link" href="#不同的激活方式" data-v-41b3a498>不同的激活方式</a><!----></li><li style="" data-v-41b3a498><a class="outline-link" href="#不同位置" data-v-41b3a498>不同位置</a><!----></li><li style="" data-v-41b3a498><a class="outline-link" href="#自定义内容" data-v-41b3a498>自定义内容</a><!----></li><li style="" data-v-41b3a498><a class="outline-link" href="#api" data-v-41b3a498>API</a><!----></li><li style="" data-v-41b3a498><a class="outline-link" href="#slots" data-v-41b3a498>Slots</a><!----></li><li style="" data-v-41b3a498><a class="outline-link" href="#events" data-v-41b3a498>Events</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-6bc6e7f3></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-48aae400><div class="content-container" data-v-48aae400><!--[--><!--]--><main class="main" data-v-48aae400><div style="position:relative;" class="vp-doc _young-design-docs_examples_popover" data-v-48aae400><div data-v-652596e2><h1 id="popover-弹出框" tabindex="-1" data-v-652596e2>Popover 弹出框 <a class="header-anchor" href="#popover-弹出框" aria-hidden="true" data-v-652596e2>#</a></h1><h2 id="基本使用" tabindex="-1" data-v-652596e2>基本使用 <a class="header-anchor" href="#基本使用" aria-hidden="true" data-v-652596e2>#</a></h2><div class="y-popover-box" data-v-652596e2><div style="display:none;" class="y-popover-outbox top" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><div class="y-popover-title">我是标题</div><!--[-->我是个弹出框内容<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->hover激活<!--]--><!----></button><!--]--></div></div><details class="details custom-block" data-v-652596e2><summary data-v-652596e2>显示代码</summary><div class="language-vue" data-v-652596e2><button class="copy" data-v-652596e2></button><span class="lang" data-v-652596e2>vue</span><pre data-v-652596e2><code data-v-652596e2><span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>placement</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>top</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>content</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>我是个弹出框内容</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2> #</span><span style="color:#C792EA;" data-v-652596e2>reference</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>      </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>type</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>primary</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span><span style="color:#A6ACCD;" data-v-652596e2>hover激活</span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2></span></code></pre></div></details><h2 id="不同的激活方式" tabindex="-1" data-v-652596e2>不同的激活方式 <a class="header-anchor" href="#不同的激活方式" aria-hidden="true" data-v-652596e2>#</a></h2><p data-v-652596e2>在这里提供几种不同方向的触发方式</p><div class="y-popover-box space" data-v-652596e2><div style="display:none;" class="y-popover-outbox top" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->hover激活<!--]--><!----></button><!--]--></div></div><div class="y-popover-box space" data-v-652596e2><div style="display:none;" class="y-popover-outbox top" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->click激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->click激活<!--]--><!----></button><!--]--></div></div><div class="y-popover-box space" data-v-652596e2><div style="display:none;" class="y-popover-outbox top" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->focus激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->focus激活<!--]--><!----></button><!--]--></div></div><div class="y-popover-box space" data-v-652596e2><div style="display:none;" class="y-popover-outbox top" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->手动激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->手动激活<!--]--><!----></button><!--]--></div></div><details class="details custom-block" data-v-652596e2><summary data-v-652596e2>显示代码</summary><div class="language-vue" data-v-652596e2><button class="copy" data-v-652596e2></button><span class="lang" data-v-652596e2>vue</span><pre data-v-652596e2><code data-v-652596e2><span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>class</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>space</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>trigger</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>hover</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>content</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>hover激活</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2> #</span><span style="color:#C792EA;" data-v-652596e2>reference</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>      </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>type</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>primary</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span><span style="color:#A6ACCD;" data-v-652596e2>hover激活</span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>class</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>space</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>trigger</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>click</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>content</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>click激活</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2> #</span><span style="color:#C792EA;" data-v-652596e2>reference</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>      </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>type</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>primary</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span><span style="color:#A6ACCD;" data-v-652596e2>click激活</span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>class</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>space</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>trigger</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>focus</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>content</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>focus激活</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2> #</span><span style="color:#C792EA;" data-v-652596e2>reference</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>      </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>type</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>primary</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span><span style="color:#A6ACCD;" data-v-652596e2>focus激活</span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>class</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>space</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>trigger</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>manual</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>v-model</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#A6ACCD;" data-v-652596e2>visible</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>content</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>手动激活</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2> #</span><span style="color:#C792EA;" data-v-652596e2>reference</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>      </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>type</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>primary</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> @</span><span style="color:#C792EA;" data-v-652596e2>click</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#A6ACCD;" data-v-652596e2>handler</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span><span style="color:#A6ACCD;" data-v-652596e2>手动激活</span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>script</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>setup</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;font-style:italic;" data-v-652596e2>import</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>{</span><span style="color:#F07178;" data-v-652596e2> </span><span style="color:#A6ACCD;" data-v-652596e2>ref</span><span style="color:#F07178;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>}</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;font-style:italic;" data-v-652596e2>from</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>vue</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>;</span></span>
<span class="line" data-v-652596e2></span>
<span class="line" data-v-652596e2><span style="color:#C792EA;" data-v-652596e2>const</span><span style="color:#A6ACCD;" data-v-652596e2> visible </span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#82AAFF;" data-v-652596e2>ref</span><span style="color:#A6ACCD;" data-v-652596e2>(</span><span style="color:#FF9CAC;" data-v-652596e2>false</span><span style="color:#A6ACCD;" data-v-652596e2>)</span><span style="color:#89DDFF;" data-v-652596e2>;</span></span>
<span class="line" data-v-652596e2><span style="color:#C792EA;" data-v-652596e2>function</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#82AAFF;" data-v-652596e2>handler</span><span style="color:#89DDFF;" data-v-652596e2>()</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>{</span></span>
<span class="line" data-v-652596e2><span style="color:#F07178;" data-v-652596e2>  </span><span style="color:#A6ACCD;" data-v-652596e2>visible</span><span style="color:#89DDFF;" data-v-652596e2>.</span><span style="color:#A6ACCD;" data-v-652596e2>value</span><span style="color:#F07178;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#F07178;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>!</span><span style="color:#A6ACCD;" data-v-652596e2>visible</span><span style="color:#89DDFF;" data-v-652596e2>.</span><span style="color:#A6ACCD;" data-v-652596e2>value</span><span style="color:#89DDFF;" data-v-652596e2>;</span></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>}</span></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>script</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>style</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>scoped</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>.</span><span style="color:#FFCB6B;" data-v-652596e2>space</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>{</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#B2CCD6;" data-v-652596e2>margin-left</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#F78C6C;" data-v-652596e2>16px</span><span style="color:#89DDFF;" data-v-652596e2>;</span></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>}</span></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>style</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2></span></code></pre></div></details><h2 id="不同位置" tabindex="-1" data-v-652596e2>不同位置 <a class="header-anchor" href="#不同位置" aria-hidden="true" data-v-652596e2>#</a></h2><p data-v-652596e2>通过<code data-v-652596e2>placement</code>属性传入不同位置，在不同位置展示 popover,可用的位置有</p><ul data-v-652596e2><li data-v-652596e2><code data-v-652596e2>top、top-start、top-end</code></li><li data-v-652596e2><code data-v-652596e2>left、left-start、left-end</code></li><li data-v-652596e2><code data-v-652596e2>right、right-start、right-end</code></li><li data-v-652596e2><code data-v-652596e2>bottom、bottom-start、bottom-end</code></li></ul><div class="popoverPosition" data-v-652596e2><!--[--><div class="y-popover-box top" data-v-652596e2><div style="display:none;" class="y-popover-outbox top" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->top<!--]--><!----></button><!--]--></div></div><div class="y-popover-box top-start" data-v-652596e2><div style="display:none;" class="y-popover-outbox top-start" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->top-start<!--]--><!----></button><!--]--></div></div><div class="y-popover-box top-end" data-v-652596e2><div style="display:none;" class="y-popover-outbox top-end" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->top-end<!--]--><!----></button><!--]--></div></div><div class="y-popover-box bottom" data-v-652596e2><div style="display:none;" class="y-popover-outbox bottom" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->bottom<!--]--><!----></button><!--]--></div></div><div class="y-popover-box bottom-start" data-v-652596e2><div style="display:none;" class="y-popover-outbox bottom-start" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->bottom-start<!--]--><!----></button><!--]--></div></div><div class="y-popover-box bottom-end" data-v-652596e2><div style="display:none;" class="y-popover-outbox bottom-end" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->bottom-end<!--]--><!----></button><!--]--></div></div><div class="y-popover-box left" data-v-652596e2><div style="display:none;" class="y-popover-outbox left" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->left<!--]--><!----></button><!--]--></div></div><div class="y-popover-box left-start" data-v-652596e2><div style="display:none;" class="y-popover-outbox left-start" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->left-start<!--]--><!----></button><!--]--></div></div><div class="y-popover-box left-end" data-v-652596e2><div style="display:none;" class="y-popover-outbox left-end" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->left-end<!--]--><!----></button><!--]--></div></div><div class="y-popover-box right" data-v-652596e2><div style="display:none;" class="y-popover-outbox right" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->right<!--]--><!----></button><!--]--></div></div><div class="y-popover-box right-start" data-v-652596e2><div style="display:none;" class="y-popover-outbox right-start" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->right-start<!--]--><!----></button><!--]--></div></div><div class="y-popover-box right-end" data-v-652596e2><div style="display:none;" class="y-popover-outbox right-end" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:;"><!----><!--[-->hover激活<!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->right-end<!--]--><!----></button><!--]--></div></div><!--]--></div><h2 id="自定义内容" tabindex="-1" data-v-652596e2>自定义内容 <a class="header-anchor" href="#自定义内容" aria-hidden="true" data-v-652596e2>#</a></h2><p data-v-652596e2>在基础示例中，我们可以通过<code data-v-652596e2>content</code>传入文本内容，也可以通过默认插槽来传入自定义节点内容,<code data-v-652596e2>width</code>可控制弹出框的宽度</p><div class="y-popover-box" data-v-652596e2><div style="display:none;" class="y-popover-outbox top" aria-hidden="true"><div class="y-popover-arrow"></div><div class="y-popover-box-content" style="width:400px;"><div class="y-popover-title">我是标题</div><!--[--><div class="y-table" style="height:auto;" data-v-652596e2><table class="y-origin-table" border="0" cellspacing="0" cellpadding="0" width="100%"><thead class="y-thead"><tr class="y-thead-th" height="40px"><!----><!----><!--[--><th class="y-thead-td" align="left">日期</th><th class="y-thead-td" align="left">姓名</th><th class="y-thead-td" align="left">地址</th><!--]--></tr></thead><tbody class="y-tbody"><!--[--><tr class="y-tbody-tr" height="40px" style=""><!----><!----><!--[--><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>2021-11-02</div></td><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>张三</div></td><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>浙江省杭州市上城区 231 号</div></td><!--]--></tr><tr class="y-tbody-tr" height="40px" style=""><!----><!----><!--[--><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>2021-12-04</div></td><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>李四</div></td><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>浙江省杭州市西湖区 12 号</div></td><!--]--></tr><tr class="y-tbody-tr" height="40px" style=""><!----><!----><!--[--><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>2021-10-01</div></td><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>王英</div></td><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>浙江省杭州市临平区 2 号</div></td><!--]--></tr><tr class="y-tbody-tr" height="40px" style=""><!----><!----><!--[--><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>2021-11-03</div></td><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>李逵</div></td><td style="width:NaNpx;" class="y-tbody-td" align="left"><div>浙江省杭州市拱墅区 199 号</div></td><!--]--></tr><!--]--></tbody></table></div><!--]--></div></div><div class="y-reference-content"><!--[--><button class="y-button y-button--primary" data-v-652596e2><!----><!--[-->hover激活<!--]--><!----></button><!--]--></div></div><details class="details custom-block" data-v-652596e2><summary data-v-652596e2>显示代码</summary><div class="language-vue" data-v-652596e2><button class="copy" data-v-652596e2></button><span class="lang" data-v-652596e2>vue</span><pre data-v-652596e2><code data-v-652596e2><span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>placement</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>top</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>title</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>我是标题</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>width</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>400</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-table</span><span style="color:#89DDFF;" data-v-652596e2> :</span><span style="color:#C792EA;" data-v-652596e2>data</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#A6ACCD;" data-v-652596e2>tableData</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> :</span><span style="color:#C792EA;" data-v-652596e2>columns</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#A6ACCD;" data-v-652596e2>columns</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2> /&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2> #</span><span style="color:#C792EA;" data-v-652596e2>reference</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>      </span><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>type</span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#C3E88D;" data-v-652596e2>primary</span><span style="color:#89DDFF;" data-v-652596e2>&quot;</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span><span style="color:#A6ACCD;" data-v-652596e2>hover激活</span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-button</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>y-popover</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>template</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;</span><span style="color:#F07178;" data-v-652596e2>script</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#C792EA;" data-v-652596e2>setup</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2><span style="color:#C792EA;" data-v-652596e2>const</span><span style="color:#A6ACCD;" data-v-652596e2> columns </span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#A6ACCD;" data-v-652596e2> [</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>{</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>title</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>日期</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>key</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>date</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>},</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>{</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>title</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>姓名</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>key</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>name</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>},</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>{</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>title</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>地址</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>key</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>address</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>},</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>]</span><span style="color:#89DDFF;" data-v-652596e2>;</span></span>
<span class="line" data-v-652596e2><span style="color:#C792EA;" data-v-652596e2>const</span><span style="color:#A6ACCD;" data-v-652596e2> tableData </span><span style="color:#89DDFF;" data-v-652596e2>=</span><span style="color:#A6ACCD;" data-v-652596e2> [</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>{</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>date</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>2021-11-02</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>name</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>张三</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>address</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>浙江省杭州市上城区 231 号</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>},</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>{</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>date</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>2021-12-04</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>name</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>李四</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>address</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>浙江省杭州市西湖区 12 号</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>},</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>{</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>date</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>2021-10-01</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>name</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>王英</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>address</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>浙江省杭州市临平区 2 号</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>},</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>{</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>date</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>2021-11-03</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>name</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>李逵</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>    </span><span style="color:#F07178;" data-v-652596e2>address</span><span style="color:#89DDFF;" data-v-652596e2>:</span><span style="color:#A6ACCD;" data-v-652596e2> </span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#C3E88D;" data-v-652596e2>浙江省杭州市拱墅区 199 号</span><span style="color:#89DDFF;" data-v-652596e2>&#39;</span><span style="color:#89DDFF;" data-v-652596e2>,</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>  </span><span style="color:#89DDFF;" data-v-652596e2>},</span></span>
<span class="line" data-v-652596e2><span style="color:#A6ACCD;" data-v-652596e2>]</span><span style="color:#89DDFF;" data-v-652596e2>;</span></span>
<span class="line" data-v-652596e2><span style="color:#89DDFF;" data-v-652596e2>&lt;/</span><span style="color:#F07178;" data-v-652596e2>script</span><span style="color:#89DDFF;" data-v-652596e2>&gt;</span></span>
<span class="line" data-v-652596e2></span></code></pre></div></details><h2 id="api" tabindex="-1" data-v-652596e2>API <a class="header-anchor" href="#api" aria-hidden="true" data-v-652596e2>#</a></h2><table data-v-652596e2><thead data-v-652596e2><tr data-v-652596e2><th data-v-652596e2>参数</th><th data-v-652596e2>说明</th><th data-v-652596e2>类型</th><th data-v-652596e2>可选值</th><th data-v-652596e2>默认值</th></tr></thead><tbody data-v-652596e2><tr data-v-652596e2><td data-v-652596e2>placement</td><td data-v-652596e2>弹出框展示出的位置</td><td data-v-652596e2>string</td><td data-v-652596e2><a href="#不同位置" data-v-652596e2>不同位置</a></td><td data-v-652596e2>&#39;top&#39;</td></tr><tr data-v-652596e2><td data-v-652596e2>width</td><td data-v-652596e2>弹出框内容宽度</td><td data-v-652596e2>string/number</td><td data-v-652596e2>——</td><td data-v-652596e2>——</td></tr><tr data-v-652596e2><td data-v-652596e2>v-model</td><td data-v-652596e2>手动控制 弹出框展示时的显隐</td><td data-v-652596e2>boolean</td><td data-v-652596e2>——</td><td data-v-652596e2>——</td></tr><tr data-v-652596e2><td data-v-652596e2>content</td><td data-v-652596e2>弹出框展示的文本内容</td><td data-v-652596e2>string</td><td data-v-652596e2>——</td><td data-v-652596e2>——</td></tr><tr data-v-652596e2><td data-v-652596e2>popperClass</td><td data-v-652596e2>自定义类，给弹出框添加自定义样式</td><td data-v-652596e2>string</td><td data-v-652596e2>——</td><td data-v-652596e2>——</td></tr><tr data-v-652596e2><td data-v-652596e2>title</td><td data-v-652596e2>弹出框内容标题</td><td data-v-652596e2>string</td><td data-v-652596e2>——</td><td data-v-652596e2>——</td></tr><tr data-v-652596e2><td data-v-652596e2>disabled</td><td data-v-652596e2>禁用 弹出框即不展示</td><td data-v-652596e2>boolean</td><td data-v-652596e2>——</td><td data-v-652596e2>false</td></tr><tr data-v-652596e2><td data-v-652596e2>trigger</td><td data-v-652596e2>弹出框触发条件</td><td data-v-652596e2>string</td><td data-v-652596e2>[&#39;click&#39;,&#39;hover&#39;,&#39;focus&#39; ,&#39;manual&#39;]</td><td data-v-652596e2>&#39;hover&#39;</td></tr><tr data-v-652596e2><td data-v-652596e2>delay</td><td data-v-652596e2>弹出框在触发关闭指令后多少毫秒关闭,默认为 0，即立即关闭</td><td data-v-652596e2>number</td><td data-v-652596e2>——</td><td data-v-652596e2>0</td></tr></tbody></table><h2 id="slots" tabindex="-1" data-v-652596e2>Slots <a class="header-anchor" href="#slots" aria-hidden="true" data-v-652596e2>#</a></h2><table data-v-652596e2><thead data-v-652596e2><tr data-v-652596e2><th data-v-652596e2>插槽名</th><th data-v-652596e2>描述</th></tr></thead><tbody data-v-652596e2><tr data-v-652596e2><td data-v-652596e2>default</td><td data-v-652596e2>默认插槽，弹出框的内容</td></tr><tr data-v-652596e2><td data-v-652596e2>reference</td><td data-v-652596e2>通过该节点触发弹出框</td></tr></tbody></table><h2 id="events" tabindex="-1" data-v-652596e2>Events <a class="header-anchor" href="#events" aria-hidden="true" data-v-652596e2>#</a></h2><table data-v-652596e2><thead data-v-652596e2><tr data-v-652596e2><th data-v-652596e2>事件名称</th><th data-v-652596e2>说明</th><th data-v-652596e2>回调参数</th></tr></thead><tbody data-v-652596e2><tr data-v-652596e2><td data-v-652596e2>afterEnter</td><td data-v-652596e2>显示动画播放完毕后触发</td><td data-v-652596e2>——</td></tr><tr data-v-652596e2><td data-v-652596e2>afterLeave</td><td data-v-652596e2>隐藏动画播放完毕后触发</td><td data-v-652596e2>——</td></tr></tbody></table></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-48aae400 data-v-6f818b12><!----><div class="prev-next" data-v-6f818b12><div class="pager" data-v-6f818b12><a class="pager-link prev" href="/young-design-docs/examples/shake.html" data-v-6f818b12><span class="desc" data-v-6f818b12>Previous page</span><span class="title" data-v-6f818b12>Shake 抖动</span></a></div><div class="has-prev pager" data-v-6f818b12><!----></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"examples_avatar.md\":\"5ef74db9\",\"examples_back-top.md\":\"eff2b663\",\"examples_button.md\":\"b40ce99f\",\"examples_card.md\":\"a4f737e2\",\"examples_container.md\":\"cf204c01\",\"examples_dialog.md\":\"3981a76e\",\"examples_drawer.md\":\"53f82345\",\"examples_icon.md\":\"ff680703\",\"examples_info.md\":\"3ca1f07b\",\"examples_input.md\":\"6d0ee76c\",\"examples_message.md\":\"ca7f41dc\",\"examples_notification.md\":\"8cc37c5c\",\"examples_popover.md\":\"fcd855f6\",\"examples_radio.md\":\"fd579072\",\"examples_rate.md\":\"f0c3a4bb\",\"examples_scroll.md\":\"10b478dc\",\"examples_select.md\":\"b2145a45\",\"examples_shake.md\":\"7953f42b\",\"examples_switch.md\":\"768b8b1a\",\"examples_table.md\":\"b2748e06\",\"examples_textarea.md\":\"bc21608f\",\"examples_upload.md\":\"0ff0e680\",\"guild_advanced.md\":\"b723c942\",\"guild_installation.md\":\"ad0cc280\",\"guild_quickstart.md\":\"a99902b7\",\"index.md\":\"d92f9c8c\"}")</script>
    <script type="module" async src="/young-design-docs/assets/app.58e303bb.js"></script>
    
  </body>
</html>